<template>
  <div class="full-screen">
    <el-row>
      <el-col
          :span="isMobile ? 24 : 20"
          style="height: 100vh;"
      >
        <el-row>
          <el-col
              :span="24"
              style="
                height: 20vh;
                display: flex;
                justify-content: center;
                align-items: center;
              "
          >
            <FileUpload style="width: 99.5%; height: 20vh; margin-top: 10px;" @refresh="handleRefresh"/>
          </el-col>
        </el-row>

        <el-row>
          <el-col
              :span="24"
              style="
                height: 80vh;
                display: flex;
                justify-content: center;
                align-items: center;
              "
              :style="
                isMobile ? { marginTop : '50px' } : {}
              "
          >
            <el-table
                :data="tableData"
                style="
                  border: #ccc thin solid;
                  border-radius: 5px;
                  width: 99.5%;
                  height: calc(100% - 2%);
                "
            >
              <el-table-column prop="name" label="名称（点击链接下载）">
                <template #default="scope">
                  <el-link
                      :href="`http://${this.hostname}:${this.port}/download/${scope.row.name}`"
                      type="primary"
                      target="_blank"
                  >
                    {{ scope.row.name }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"/>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-popconfirm
                      title="确定删除?"
                      @confirm="deleteFile(scope.row.name)"
                  >
                    <template #reference>
                      <el-button
                          type="danger"
                          size="small"
                      >
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="isMobile ? 0 : 4">
        <div
            style="
              border: #ccc thin solid;
              border-radius: 5px;
              width: 98%;
              height: calc(100% - 12px);
              margin-top: 5px;
            "
        >
          <label style="margin-left: 5px;">服务器链接：</label>
          <br/>
          <br/>
          <!-- 二维码部分 -->
          <div v-for="(address, index) in serverAddressList" :key="index">
            <div
                style="text-align: center;"
            >
              <qrcode-vue :value="address" :size="100" level="H"></qrcode-vue>
              <br/>
              {{ address }}
            </div>
            <br/>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue'
import axios from "axios";
import QrcodeVue from 'qrcode.vue';

export default {
  name: 'App',
  components: {
    FileUpload,
    QrcodeVue
  },
  computed: {
    isMobile() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }
  },
  data() {
    return {
      hostname: window.location.hostname,
      port: window.location.port,
      serverAddressList: [],
      tableData: []
    }
  },
  setup() {

  },
  mounted() {
    this.getServerAddressList();
    this.getUploadFileList();
  },
  methods: {
    /**
     * 获取服务器地址列表
     * @returns {Promise<any>}
     */
    async getServerAddressList() {
      // 根据访问者的 IP 或域名返回不同的 URL
      const response = await axios.get(`http://${this.hostname}:${this.port}/getServerAddressList`);
      this.serverAddressList = response.data;
    },
    /**
     * 获取上传文件列表
     * @returns {Promise<any>}
     */
    async getUploadFileList() {
      // 根据访问者的 IP 或域名返回不同的 URL
      const response = await axios.get(`http://${this.hostname}:${this.port}/getUploadFileList`);
      this.tableData = response.data;
    },
    async deleteFile(fileName) {
      await axios
          .get(
              `http://${this.hostname}:${this.port}/delete/${fileName}`
          )
          .then(
              () => {
                this.getUploadFileList();
              }
          );
    },
    /**
     * 处理来自 FileUpload 组件的 refresh 事件
     */
    handleRefresh() {
      this.getUploadFileList();
    }
  }
}
</script>


<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 移除滚动条 */
}

.full-screen {
  width: 100%;
  height: 100vh;
  border: #ccc thin solid;
  border-radius: 5px;
  box-sizing: border-box; /* 确保边框和内边距不会增加元素的宽度和高度 */
}
</style>
